/**
 *  通用弹窗
 *   
 *  参数
 *  modalVisible  弹窗显示和隐藏
 *  title    标题
 *  onClosePress 关闭按钮
 *  text / renderCustom   文本/自定义代码
 *  isAlignment 标题和内容对齐
 *  cancelText 存在 代表有取消按钮
 *  eg
 * 
 * <CommonDialog 
 *    modalVisible={modalVisible}
 *    title={'标题'} 
 *    onClosePress={() => { this.setState({ modalVisible: false }) }} 
 *    renderCustom={() => {
 *         return (
 *           <View><Text>1234567890</Text></View>
 *        )
 *  }} />
 *
 * <CommonDialog 
 *    modalVisible={modalVisible}
 *    text={'备注文案。。。'} 
 *    onClosePress={() => { this.setState({ modalVisible: false }) }} 
 *  }} />
 * */

import React, { Component } from 'react';
import {
  ScrollView, StyleSheet, Text, View, TouchableOpacity, Image, Modal, PixelRatio
} from "react-native";
import { GLOBAL } from '../../config/global';
import { style } from '../../theme/style';
const scale = GLOBAL.SCALE;
const closeImg = require('../../imgs/close.png');

export class FingerPrintDialog extends Component {
  constructor(props) {
    super(props)
    this.state = {

    }
  }

  render () {
    let { modalVisible, title, onClosePress, text, renderCustom, onConfirmPress, onCancelmPress, confirmBtnText, confirmBtnTextStylePro, isAlignment, cancelText, moreText } = this.props;
    return (
      <Modal animationType={"fade"} transparent={true} visible={modalVisible} onRequestClose={() => { }}>
        <View style={styles.modalPage}>
          <View style={styles.modalWrap}>
            <View style={styles.itemBox}>
              <Text style={{ fontSize: 18 * scale, fontWeight: "bold" }}>{title || '提示'}</Text>
              {/* <TouchableOpacity style={{ width: 30 * scale, height: 30 * scale, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }} activeOpacity={.6} onPress={() => {
                onClosePress && onClosePress()
              }}>
                <Image source={closeImg} style={{ tintColor: '#0E7FFD', width: 14 * scale, height: 14 * scale }} />
              </TouchableOpacity> */}
            </View>

            {/* <ScrollView style={styles.modalBody}> */}
            <View>
              {
                renderCustom ? renderCustom() : (
                  <Text style={{ lineHeight: 18 * scale }}>{text}</Text>
                )
              }
            </View>
            {/* </ScrollView> */}
            {
              confirmBtnText ?
                <View style={[styles.btnBox, cancelText ? styles.btnBoxActive : null]}>
                  {cancelText ? <TouchableOpacity style={[styles.confirmBtnTextStyle, styles.confirmBtnTextStyleActive, confirmBtnTextStylePro || null]} activeOpacity={.6} onPress={() => {
                    onClosePress && onClosePress()
                  }}>
                    <Text style={{ color: '#0E7FFD', textAlign: 'center' }}>{cancelText}</Text>
                  </TouchableOpacity> : null}
                  <TouchableOpacity style={[styles.confirmBtnTextStyle, confirmBtnTextStylePro || null]} activeOpacity={.6} onPress={() => {
                    onConfirmPress && onConfirmPress()
                  }}>
                    <Text style={{ color: '#fff', textAlign: 'center' }}>{confirmBtnText}</Text>
                  </TouchableOpacity>
                </View> : null
            }
            {
              moreText ? <Text style={styles.tipInfo}>*当壹化网转单存在多物料对应掌上化销同一商品，且单价一致时，系统自动合并转单数量，泉化订单类型仅支持一单一商品</Text> : null
            }
          </View>
        </View>
      </Modal>
    )
  }
}

const styles = StyleSheet.create({
  modalPage: {
    width: GLOBAL.SCREEN_WIDTH,
    height: GLOBAL.SCREEN_HEIGHT,
    backgroundColor: 'rgba(0, 0, 0, .6)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalWrap: {
    width: 302 * scale,
    backgroundColor: '#fff',
    borderRadius: 4 * scale,
    overflow: 'hidden',
    paddingBottom: 10 * scale,
  },
  itemBox: {
    flexDirection: 'row',
    justifyContent: 'center',
    paddingTop: 26 * scale,
  },
  modalTitle: {
    height: 60 * scale,
    paddingLeft: 32 * scale,
    paddingRight: 26 * scale,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  modalTitleActive: { //样式对齐
    paddingLeft: 18 * scale,
    paddingRight: 18 * scale,
  },
  modalBody: {
    backgroundColor: 'rgb(255, 255, 255)',
    maxHeight: 328 * scale,
    paddingLeft: 18 * scale,
    paddingRight: 18 * scale,
    paddingTop: 10 * scale,
    paddingBottom: 30 * scale,
  },
  btnBoxActive: {
    justifyContent: 'space-around',
    paddingHorizontal: 25 * scale,
    marginBottom: 20 * scale
  },
  confirmBtnTextStyle: {
    backgroundColor: '#0E7FFD',
    paddingVertical: 8 * scale,
    paddingHorizontal: 20 * scale,
    borderRadius: 18 * scale,
    borderColor: style.color.themeColor,
    borderWidth: 1 / PixelRatio.get(),
  },
  confirmBtnTextStyleActive: {
    backgroundColor: '#fff',
  },
  btnBox: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', paddingTop: 10 * scale },
  tipInfo: {
    fontSize: 12 * scale,
    color: '#555',
    lineHeight: 16 * scale,
    paddingVertical: 20 * scale,
    paddingHorizontal: 20 * scale
  }
})